<template>
  <div class="content">
    <hytable v-bind="contentTableConfig" :List="List" v-model:page="pageInfo">
      <template #headerHandler>
        <slot name="headerHandler"></slot>
      </template>
      <template #status="scope">
        <el-button
          size="small"
          :type="scope.row.status == '1' ? 'primary' : 'danger'"
        >
          {{ scope.row.status == "1" ? "启用" : "弃用" }}
        </el-button>
      </template>
      <template #createAt="scope">
        <strong>{{ scope.row.create }}</strong>
      </template>
      <template #updateAt="scope">
        <strong>{{ scope.row.update }}</strong>
      </template>
      <template #handle="scope">
        <div class="button">
          <el-button
            type="success"
            size="small"
            @click="handleOpreator(scope.row)"
          >
            编辑
          </el-button>
          <el-button
            type="danger"
            size="small"
            @click="handledelete(scope.row)"
          >
            删除
          </el-button>
        </div>
      </template>
      <template
        v-for="item in otherSlotNames"
        :key="item.prop"
        #[item.slotName]="scope"
      >
        <template v-if="item.slotName">
          <slot :name="item.slotName" :row="scope.row"></slot>
        </template>
      </template>
    </hytable>
  </div>
</template>

<script>
import { useStore } from "vuex";
import { computed, ref, watch } from "vue";
import hytable from "@/base-ui/table/index.js";
export default {
  name: "pageContent",
  components: { hytable },
  emit: ["editbuttonClick", "deletebuttonClick"],
  props: {
    contentTableConfig: {
      type: Object,
      required: true,
    },
  },
  setup(props, { emit }) {
    const store = useStore();
    const pageInfo = ref({
      currentPage: 0,
      pageSize: 10,
    });
    watch(
      pageInfo,
      (newval) => {
        store.commit("changepageInfo", newval.currentPage);
        store.dispatch(
          `${props.contentTableConfig.storeName}/get${props.contentTableConfig.name}PageList`,
          {
            pageUrl: `/get${props.contentTableConfig.name}List`,
            queryInfo: {
              offset:
                (pageInfo.value.currentPage - 1) * pageInfo.value.pageSize,
              size: pageInfo.value.pageSize,
            },
          }
        );
      },
      {
        deep: true,
      }
    );
    store.dispatch(
      `${props.contentTableConfig.storeName}/get${props.contentTableConfig.name}PageList`,
      {
        pageUrl: `/get${props.contentTableConfig.name}List`,
        queryInfo: {
          offset: pageInfo.value.currentPage * pageInfo.value.pageSize,
          size: pageInfo.value.pageSize,
        },
      }
    );
    store.dispatch(
      `${props.contentTableConfig.storeName}/get${props.contentTableConfig.name}Total`,
      {
        pageUrl: `/get${props.contentTableConfig.name}List`,
      }
    );
    const handleOpreator = (row) => {
      emit("editbuttonClick", row);
    };
    const handledelete = (item) => {
      console.log("editbuttonClick");
      emit("deletebuttonClick", item);
    };
    const List = computed(
      () =>
        store.state[`${props.contentTableConfig.storeName}`][
          `${props.contentTableConfig.name}List`
        ]
    );

    //
    const otherSlotNames = props.contentTableConfig?.propList.filter((item) => {
      if (item?.slotName === "status") return false;
      if (item?.slotName === "createAt") return false;
      if (item?.slotName === "updateAt") return false;
      return true;
    });

    return {
      handleOpreator,
      pageInfo,
      List,
      otherSlotNames,
      handledelete,
    };
  },
};
</script>

<style lang="scss" scope>
.content {
}
</style>
